<template>
  <div style="padding: 10px; background-color: #fafafa; min-height: 100vh; display: flex; flex-direction: column;">
    <!-- 顶部导航栏 -->
    <div id="navbar" style="background-color: #795548; padding: 10px; display: flex; justify-content: space-between;">
      <div style="display: flex;">
        <a href="#home" style="color: #fff; text-decoration: none; padding: 5px 15px;">首页</a>
        <a href="#promotions" style="color: #fff; text-decoration: none; padding: 5px 15px;">宣传活动</a>
        <a href="#announcements" style="color: #fff; text-decoration: none; padding: 5px 15px;">公告信息</a>
        <a href="#consultations" style="color: #fff; text-decoration: none; padding: 5px 15px;" @click="showConsultationDialog">主要咨询</a>
        <a href="#callServices" style="color: #fff; text-decoration: none; padding: 5px 15px;" @click="showCallService">呼叫服务</a>
      </div>
      <div style="display: flex;">
        <el-select v-model="queryType" placeholder="查询条件" style="width: 120px; margin-right: 5px;">
          <el-option label="活动名" value="name"></el-option>
          <el-option label="活动类型" value="type"></el-option>
          <el-option label="活动地点" value="location"></el-option>
        </el-select>
        <el-input v-model="queryValue" placeholder="查询内容" style="width: 150px;" clearable @input="console.log('Input event triggered')"></el-input>
        <el-button type="primary" @click="search">查询</el-button>
      </div>
    </div>

    <!-- 视频播放区域 和 公告信息 -->
    <div style="display: flex; margin: 20px 0;">
      <!-- 公告信息 -->
      <section id="announcements" style="flex: 1; margin-right: 10px; padding: 15px; background-color: #fffaf0; border-radius: 5px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
        <h2 style="color: #795548;">公告信息</h2>
        <ul class="announcement-list" style="list-style-type: none; padding: 0;">
          <li v-for="announcement in announcements" :key="announcement" style="margin-bottom: 10px;">
            <h3 style="color: #795548;">{{ announcement.title }}</h3>
            <p style="color: #666;">{{ announcement.content }}</p>
          </li>
        </ul>
      </section>
      <!-- 视频播放区域 -->
      <section id="video-player" style="flex: 2; margin-left: 10px; padding: 15px; background-color: #fffaf0; border-radius: 5px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);">
        <video controls style="width: 100%; height: auto;">
          <source :src="videoSrc" type="video/mp4">
          您的浏览器不支持 video 标签。
        </video>
      </section>
    </div>

    <!-- 活动列表 -->
    <section id="activities" style="margin: 20px; padding: 15px; background-color: #fffaf0; border-radius: 5px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);  ">
      <h2 style="color: #795548;">活动列表</h2>
      <el-row :gutter="15" style="margin-top: 15px;">
        <el-col :span="8" v-for="item in tableData" :key="item.activityId">
          <el-card class="box-card" shadow="hover" @click.native="goToDetail(item.activityId)">
            <div slot="header" class="card-header clearfix">
              <span>{{ item.activityName }}</span>
              <el-button style="float: right; padding: 3px 0" type="text" @click.stop="handleEdit(item)"> </el-button>
            </div>
            <div class="card-content">
              <p><strong>类型:</strong> {{ item.activityType }}</p>
              <p><strong>地点:</strong> {{ item.activityLocation }}</p>
              <img :src="item.imageUrl" alt="活动图片" style="width: 100%; height: auto; margin-top: 10px; border-radius: 5px;">
            </div>
          </el-card>
        </el-col>
      </el-row>
    </section>

    <!-- 主要咨询对话框 -->
    <el-dialog title="主要咨询" :visible.sync="dialogVisible" width="30%">
      <p>这里是主要咨询的内容。</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 呼叫服务对话框 -->
    <el-dialog title="养老院联系电话" :visible.sync="callServiceDialogVisible" width="30%">
      <p style="color: #795548; font-size: 18px;">联系电话：010-12345678</p>
      <span slot="footer" class="dialog-footer">
        <el-button @click="callServiceDialogVisible = false">关闭</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import {Carousel, CarouselItem, Select, Option, Input, Button, Row, Col, Card, Dialog} from 'element-plus';
import request from "@/utils/request";
import axios from 'axios';

export default {
  name: "UserCenter",
  components: {
    ElCarousel: Carousel,
    ElCarouselItem: CarouselItem,
    ElSelect: Select,
    ElOption: Option,
    ElInput: Input,
    ElButton: Button,
    ElRow: Row,
    ElCol: Col,
    ElCard: Card,
    ElDialog: Dialog
  },
  data() {
    return {
      form: {},
      dialogVisible: false,
      search: '',
      currentPage: 1,
      total: 10,
      pageSize: 20,
      tableData: [],
      queryType: '',
      queryValue: '',
      activityId: '',
      selectedIds: [],
      announcements: [
        {
          title: '老年人健康讲座',
          content: '尊敬的老年朋友们，我们将于本月15日下午2点在社区中心举办一场关于老年人健康的专题讲座。讲座将邀请知名医生讲解老年人常见疾病的预防和治疗知识。欢迎各位老年朋友踊跃参加！'
        },
        {
          title: '老年人书法班招生',
          content: '为了丰富老年人的文化生活，社区中心特开设老年人书法班。课程时间为每周六上午9点至11点，由专业书法老师授课。报名截止日期为本月20日，名额有限，先到先得！'
        },
        {
          title: '文艺表演',
          content: '为了丰富老年人的文化生活，社区中心特开设老年人书法班。课程时间为每周六上午9点至11点，由专业书法老师授课。报名截止日期为本月20日，名额有限，先到先得！'
        },
        {
          title: '老人组团爬山',
          content: '为了丰富老年人的文化生活，社区中心特开设老年人书法班。课程时间为每周六上午9点至11点，由专业书法老师授课。报名截止日期为本月20日，名额有限，先到先得！'
        }
      ],
      consultations: [],
      callServices: [],
      currentVideo: null,
      videoSrc: null,
      callServiceDialogVisible: false
    }
  },
  methods: {
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true;
    },
    handleSizeChange() {
      this.load();
    },
    handleCurrentChange() {
      this.load();
    },
    search() {
      let url = '';
      const params = {
        pageNumber: this.currentPage,
        pageSize: this.pageSize
      };

      switch (this.queryType) {
        case 'name':
          url = '/user/selectActivityByName';
          params.activityName = this.queryValue;
          break;
        case 'type':
          url = '/user/selectActivtyByType';
          params.activityType = this.queryValue;
          break;
        case 'location':
          url = '/user/selectActivityByLocation';
          params.activityLocation = this.queryValue;
          break;
        default:
          return;
      }

      request.get(url, {params}).then(res => {
        this.tableData = res.data.list.map(item => ({
          ...item,
          imageUrl: this.getImageSrc(item.imageUrl)
        }));
        this.total = res.data.total;
      });
    },
    load() {
      request.get("/user/selectActivtyPage", {
        params: {
          pageNumber: this.currentPage,
          pageSize: this.pageSize,
          search: this.search
        }
      }).then(res => {
        this.tableData = res.data.list.map(item => ({
          ...item,
          imageUrl: this.getImageSrc(item.imageUrl)
        }));
        this.total = res.data.total;
      })
    },
    handleSelectionChange(selection) {
      this.selectedIds = selection.map(item => item.id);
    },
    goToDetail(activityId) {
      this.$router.push({name: 'ActivityDetailInfo', params: {activityId: activityId}});
    },
    getImageSrc(imageUrl) {
      try {
        return require(`@/assets/img/${imageUrl}`);
      } catch (error) {
        console.error('Image not found:', imageUrl);
        return '';
      }
    },
    playVideo(video) {
      this.currentVideo = {
        videoUrl: require('@/assets/video/WeChat_20241031161212.mp4')
      };
    },
    showConsultationDialog() {
      this.$router.push({ path: '/Talk' });
    },
    showCallService() {
      this.$router.push({ path: '/MainTalkService' });
    }
  },
  created() {
    this.load();
  },
  mounted() {
    this.videoSrc = require('@/assets/video/WeChat_20241031162701.mp4');
    console.log('Component mounted');
  }
}
</script>
<style scoped>
#navbar a {
  color: #fff;
  text-decoration: none;
  transition: background-color 0.3s;
}

#navbar a:hover {
  background-color: #a1887f;
  color: #fff;
}

.box-card {
  width: 80%;

  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
  border-radius: 10px;
  overflow: hidden;
  background-color: #fff;
  cursor: pointer;
}

.box-card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.el-card__body {
  padding: 15px;
}

.card-header {
  background-color: #f5f5f5;
  padding: 10px;
  border-bottom: 1px solid #ddd;
}

.card-content {
  padding: 15px;
}

.el-input__inner {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.el-row {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.el-col {
  margin-bottom: 15px;
}

.el-button--primary {
  background-color: #795548;
  border-color: #795548;
  border-radius: 20px;
  padding: 8px 15px;
}

.el-button--primary:hover {
  background-color: #a1887f;
  border-color: #a1887f;
}

/* 页面整体样式 */
#app {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  color: #333;
  padding: 20px;
}

section {
  background-color: #fffaf0;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin-bottom: 20px;
}

h2 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #795548;
}

h3 {
  font-size: 18px;
  margin-bottom: 5px;
  color: #795548;
}

p {
  font-size: 14px;
  color: #666;
  margin: 5px 0;
}

img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  margin-top: 10px;
}

/* 对话框样式 */
.el-dialog {
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.el-dialog__header {
  background-color: #795548;
  color: white;
  padding: 15px;
  border-radius: 10px 10px 0 0;
}

.el-dialog__title {
  font-size: 18px;
}

.el-dialog__body {
  padding: 15px;
  color: #333;
}

.el-dialog__footer {
  padding: 10px 15px;
  text-align: right;
  border-top: 1px solid #ebebeb;
  border-radius: 0 0 10px 10px;
}

.el-dialog__footer.el-button {
  border-radius: 20px;
  padding: 8px 15px;
}

/* 呼叫服务对话框样式 */
.call-service-dialog {
  background-color: #fffaf0;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
}

.call-service-dialog__header {
  background-color: #795548;
  color: white;
  padding: 15px;
  border-radius: 10px 10px 0 0;
}

.call-service-dialog__title {
  font-size: 18px;
}

.call-service-dialog__body {
  padding: 15px;
  color: #333;
}

.call-service-dialog__footer {
  padding: 10px 15px;
  text-align: right;
  border-top: 1px solid #ebebeb;
  border-radius: 0 0 10px 10px;
}

.call-service-dialog__footer.el-button {
  border-radius: 20px;
  padding: 8px 15px;
}
</style>